﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Basic margin and padding in div test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />

<!-- general libraries -->
<!--[if IE]>
<script src="excanvas.js" type="text/javascript"></script>
<![endif]--> 

<script src="jquery.js" type="text/javascript" ></script>   

<!-- MSE-iT libraries -->
<script src="../jquery.mseitUtilities.js" type="text/javascript" ></script> 
<script src="../JQuery.backgroundCanvas.js" type="text/javascript"></script>

<!-- background canvas function for all tests (bound to class .Test) -->
<script type="text/javascript">
$(document).ready(function() 
{  
	$(".Test").backgroundCanvas(); 
});

// Draw the background  on load and resize
$(window).load(function () { DrawBackground(); });
$(window).resize(function() { DrawBackground(); });

function DrawBackground() {	$(".Test").backgroundCanvasPaint(TestBackgroundPaintFkt); }

function TestBackgroundPaintFkt(context, width, height, elementInfo ) 
{
		var options = {x:0, height: height, width: width, radius:14,  border: 0 };

		// Draw the red border rectangle 
		context.fillStyle = "#FF0000";
		$.canvasPaint.roundedRect(context,options);
		
		// Draw the gradient filled inner rectangle
		var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
		backgroundGradient.addColorStop(0 ,'#AAAAFF');
		backgroundGradient.addColorStop(1, '#AAFFAA');
		options.border = elementInfo.borderLeft;
		context.fillStyle = backgroundGradient; 
		$.canvasPaint.roundedRect(context,options);
}
</script>

<style type="text/css">

body {	
background-color:yellow; 
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.OuterBox
{
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
border: 5px red solid;
background-color: #AAAAAA;

}

#Test1, #Test1Compare
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border:5px red solid;
width:800px;
height:100px;
background-color: #AAAAFF;
}

#Test2, #Test2Compare
{
margin: 10px 10px 10px 10px;
padding: 0px 0px 0px 0px;
border:5px red solid;
width:800px;
height:100px;

background-color:#AAAAFF;
}

#Test3, #Test3Compare
{
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border:5px red solid;
width:800px;
height:100px;

background-color:#AAAAFF;
}

#Test4, #Test4Compare
{
margin: 1em 1em 1em 1em;
padding: 1em 1em 1em 1em;
border:0.5em red solid;
width:800px;
height:100px;

background-color:#AAAAFF;
}


</style>


</head>


<body>
<h1>Test1: no margin - no padding</h1>
<div class="OuterBox">
<div id="Test1" class="Test">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div class="OuterBox">
<div id="Test1Compare" >
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>


<h1>Test2: margin - no padding</h1>
<div class="OuterBox">
<div id="Test2" class="Test">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div class="OuterBox">
<div id="Test2Compare" >
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>


<h1>Test3: no margin - padding</h1>
<div class="OuterBox">
<div id="Test3" class="Test">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div class="OuterBox">
<div id="Test3Compare" >
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>


<h1>Test4: margin - padding</h1>
<div class="OuterBox">
<div id="Test4" class="Test">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div class="OuterBox">
<div id="Test4Compare" >
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>



</body>
</html>
